<!doctype html>
<html lang="en">
<head>
    <title>ranter水果店</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="css/bootstrap.css">
    <style>
        .navbar{
            border-bottom: 1px solid #76ac25;
        }

        .carousel-inner .item img{
            margin: 0 auto;
        }
        .shanping{
            width:260px;
            height:290px;
            overflow: hidden;
        }
        .miaoshu span{
            color: #f33f00;
            font-weight: bold;
        }
        .add{
            background: #f33f00;
            border: none;
            color: #fff;
            padding: 2px 4px;
            border: 1px;
            border-radius: 4px;
            float: right;
            margin-right: 40px;
        }
        .pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus{
            background-color: #76ac25;
            border-color: #76ac25;
        }
        .pagination > li > a, .pagination > li > span{
            color: #76ac25;
        }
    </style>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" style="padding-top: 15px;">
    <div class="container" style="margin-bottom: 4px;">
        <div class="row">
            <div class="col-lg-4">
                <img src="images/first.png" alt="" width="">
            </div>
            <div class="col-lg-4 col-lg-offset-2">
                <div class="input-group">
                    <input name="searchName" type="text" style="border: 2px solid #76ac25;border-right: none;" class="form-control" placeholder="输入商品名称进行搜索">
                    <span class="input-group-btn">
                     <button id="search" style="color: white;font-weight:bold;background: #76ac25;" class="btn btn-default" type="button">搜索</button>
                    </span>
                </div>
            </div>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="/gouwuche">购物车</a></li>
                <li><a href="/login"><%= UserName%></a></li>
                <li><a href="/zhuce">注册</a></li>
            </ul>
        </div>

    </div>
</nav>
<div class="container" style="margin-top: 80px;">
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
            <div class="item active" style="background: rgb(121, 4, 178);">
                <img src="images/01.jpg" alt="...">
                <div class="carousel-caption">
                    ...
                </div>
            </div>
            <div class="item" style="background: rgb(187, 215, 226);">
                <img src="images/02.jpg" alt="...">
                <div class="carousel-caption">
                    ...
                </div>
            </div>
            <div class="item" style="background: rgb(164, 182, 255)">
                <img src="images/03.jpg" alt="...">
                <div class="carousel-caption">
                    ...
                </div>
            </div>

        </div>

        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
    <div class="row">
        <div id="jieguo">

        </div>
    </div>
    <div id="liebiao">


    </div>

    <!--分页-->
    <div class="row">
        <div class="col-md-4 col-md-offset-5">
            <nav aria-label="Page navigation">
                <ul class="pagination">
                    <li>
                        <a href="javascript:void(0);" aria-label="Previous" class="previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    <% for(var i = 1; i <= pagemount; i++ ) {%>
                    <li class="yemaanniu" data-page=<%= i%>><a href="javascript:void(0);"><%= i%></a></li>
                    <%}%>
                    <li>
                        <a href="javascript:void(0);" aria-label="Next" class="next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </div>

    </div>

</div>

<footer class="navbar-default" style="padding-top: 15px;border-top: 1px solid #76ac25;">
    <div class="container">
        <div class="row">
            <div class="col-lg-4 col-lg-offset-2">
                <p>版权所有：ranter</p>
            </div>
            <div class="col-lg-3 col-lg-offset-1">
                <p>&nbsp;&nbsp;&nbsp;&nbsp;联系方式：11018391083</p>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-3 col-lg-offset-4" style="text-align: center">
                <p>Copyright © 2017 ranter网上水果店</p>
            </div>
        </div>

    </div>
</footer>
<!--underscore模板-->


<script src="js/jquery-3.2.0.js"></script>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>-->
<script src="js/bootstrap.js"></script>
<script src="js/underscore-noflect.js"></script>
<script type="text/template" id="moban">
    <h2>搜索结果</h2>
    {{ for(var i = 0; i < liebiao_1.length; i++){ }}
    <div class="col-sm-6 col-md-3" style="margin-bottom: 20px;">
        <div class="shanping">
            <img src="{{= liebiao_1[i].src}}" alt="..." width="210" height="210" class="img-squre">
            <div class="miaoshu">
                <p>
                    <i>{{= liebiao_1[i].spMiaoshu}}</i>
                    <br>
                    <span>￥{{=liebiao_1[i].jiage}}</span>
                    <input class="add" type="button" value="加入购物车">
                </p>
            </div>
        </div>
    </div>
    {{}}}
</script>

<script type="text/template" id="moban2">
    <h2>商品列表</h2>
    {{ for(var i = 0; i < liebiao.length; i++){ }}
    <div class="col-sm-6 col-md-3" style="margin-bottom: 20px;">
        <div class="shanping">
            <img src="{{= liebiao[i].src}}" alt="..." width="210" height="210" class="img-squre">
            <div class="miaoshu">
                <p>
                    <i>{{= liebiao[i].spMiaoshu}}</i>
                    <br>
                    <span>￥{{=liebiao[i].jiage}}</span>
                    <input class="add" type="button" value="加入购物车">
                </p>
            </div>
        </div>
    </div>
    {{}}}
</script>
<script>

    $("#jieguo").hide()
    $("#search").click(function(){
        $("#jieguo").show();
        $.get('/serach',{
            "spName":$("[name='searchName']").val()
        },function(result){
            $("#jieguo").empty();
            if(result == "-1"){
                alert("没找到匹配的商品")
                $("#jieguo").hide();
            }
            var compiled = _.template($("#moban").html());
            var html = compiled({
                liebiao_1:result
            });
           $("#jieguo").append(html);
           $(".add").click(function(){
                $.post('/add',{
                    "spMiaoshu" : $(this).siblings("i").text().toString()
                },function (result) {
                    if(result == "-1"){
                        alert("添加失败，请登录后再进行添加")
                    }else{
                        alert("添加成功");
                    }
                })
            })

        });
    })
    //分页处理
    var nowPage = 0;
    //设置默认按钮样式
    $(".yemaanniu").first().addClass('active');
    //给所有页码按钮添加监听
    $(".yemaanniu").click(function(){
        nowPage = parseInt($(this).attr('data-page')) - 1;
        $(this).addClass('active').siblings().removeClass('active');
        getData(nowPage);
    })
    //翻页效果
    $(".next").click(function () {
        console.log($(".yemaanniu").length)
        if(nowPage >= $(".yemaanniu").length - 1 ){
            return;
        }
        nowPage ++;
        getData(nowPage);
        $(".yemaanniu").eq(nowPage).siblings().removeClass('active');
        $(".yemaanniu").eq(nowPage).addClass('active');
    })
    $(".previous").click(function () {
        if(nowPage <= 0){
            return;
        }
        nowPage --;
        getData(nowPage);
        $(".yemaanniu").eq(nowPage).siblings().removeClass('active');
        $(".yemaanniu").eq(nowPage).addClass('active');
    })
    getData(0);
    function getData(page){
        //Ajax请求数据
        $.get("/du?page=" + page ,function(result){
            var compiled = _.template($("#moban2").html());
            //清空全部留言
            $("#liebiao").html("");
                var html = compiled({
                    liebiao : result
                });
            $("#liebiao").append($(html));
            //加入购物车
            $(".add").click(function(){
                $.post('/add',{
                    "spMiaoshu" : $(this).siblings("i").text().toString()
                },function (result) {
                    if(result == "-1"){
                        alert("添加失败，请登录后再进行添加")
                    }else{
                        alert("添加成功");
                    }
                })
            })
        })
    }
</script>
</body>
</html>